<template>
  <div class="screen-progress">
    <div class="screen-progress-wrap">
      <div class="client-name">
        <img src="@/assets/images/fjscreen/client.png" alt="">
      </div>
      <div class="screen-progress-content">
        <p>{{ name }}</p>
        <el-progress :percentage="percentage" :show-text="false" ></el-progress>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    percentage: {
      type: Number,
      default: 0
    },
    name: {
      type: String,
      default: '',
    }
  },
  data() {
    return {}
  },
}
</script>
<style lang="scss" scoped>
.screen-progress-wrap {
  width: 100%;
  margin: 14px 0;
  display: flex;
  align-items: center;
  &:first-child {
    margin: 0 0 14px 0;
  }
}
img {
  width: 17px;
  margin: 5px 5px 0 0;
}
p {
  color: #fff;
  font-size: 16px;
  font-family: PingFang SC;
}
.screen-progress-content {
  flex: 1;
  .el-progress {
    margin-top: 6px;
  }
}
/deep/.el-progress-bar__outer {
  height: 10px !important;
}
/deep/.el-progress-bar__inner {
  background-image: linear-gradient(to right, #0078FF, #7BE16E);
}
</style>